<template>
  <b-container fluid style="margin-top: 5%">
    <h1>21点</h1>
    <b-alert show>{{message}}</b-alert>

    <b-row class="my-1" v-for="player in players" :key="player.name" v-if="player.name !== my.name">
      <b-col sm="2"><label>{{player.name}}</label></b-col>
      <b-col sm="9">
        <b-button-group>
          <b-button v-for="(number,index) in player.numbers" :key="index">{{player.status !==3 ? 'x' :number}}
          </b-button>
        </b-button-group>
      </b-col>
    </b-row>

    <div style="margin-top: 10% ">
      <b-btn variant="success" v-if="my.name!==''" @click="addNumber">
        发牌
      </b-btn>
      <b-btn variant="success" v-if="my.name!==''" @click="compareNumber">
        开局
      </b-btn>
    </div>

    <b-row class="my-1">
      <b-col sm="2" style="margin-top: 10%"><label>{{my.name}}</label></b-col>
      <b-col sm="9">
        <b-button-group>
          <b-button v-for="(number,index) in my.numbers" :key="index">{{number}}</b-button>
        </b-button-group>
      </b-col>
    </b-row>

    <b-modal title="Submit your name" hide-header-close ok-only @ok="handleOk"
             v-model="showInputMyName">
      <form>
        <b-form-input type="text" v-model="inputName" placeholder="Enter your name"></b-form-input>
      </form>
    </b-modal>

    <b-modal title="最终结果" hide-header-close ok-only centered size="sm" @ok="resetGame"
             v-model="showGameResult">
      <p class="my-4" v-for="(message,index) in gameResultMessage" :key="index">{{message}}</p>
    </b-modal>

    <div style="margin-top: 10% ">
      <b-btn variant="success" v-if="my.name==='' || my.name.length===0" @click="joinGame">
        加入游戏
      </b-btn>
    </div>

  </b-container>
</template>

<script>
import webSocket from '../utils/webSocket'

export default {
  name: 'game21',
  data: function () {
    return {
      players: [],
      inputName: '',
      my: {name: '', numbers: [], status: 0},
      showInputMyName: false,
      showGameResult: false,
      message: '欢迎加入游戏',
      socket: null,
      gameResultMessage: []
    }
  },
  mounted () {
    let that = this
    that.socket = webSocket.initSocket(that.showMessage, 'webSocket21')
    // 接收到消息的回调方法
    this.socket.onmessage = function (event) {
      console.log('receive message' + event.data)
      let typeMessage = event.data.split(webSocket.messageSeparator)
      let type = parseInt(typeMessage[0])
      let message = typeMessage[1]
      switch (type) {
        case webSocket.JOIN_SUCCESS:
          that.my.name = that.inputName
          that.addNumber()
          break
        case webSocket.JOIN_FAILED:
          that.showMessage('已经有人叫' + that.inputName + '了,换个名字吧')
          break
        case webSocket.SHOW_MESSAGE :
          that.showMessage(message)
          break
        case webSocket.UPDATE_DATA :
          that.players = JSON.parse(message)
          break
        case webSocket.CARD_COMPARE:
          let result = JSON.parse(message)
          that.gameResultMessage.push(result.winnerString)
          result.numberList.forEach(item => that.gameResultMessage.push(item))
          that.showGameResult = true
      }
    }
  },
  methods: {
    sendMessage: function (type, message) {
      let sendMessage = type + webSocket.messageSeparator + message
      this.socket.send(sendMessage)
    },
    showMessage: function (message) {
      this.message = message
    },
    joinGame: function () {
      this.showInputMyName = true
      this.inputName = ''
    },
    handleOk: function () {
      this.sendMessage(webSocket.JOIN_GAME, this.inputName)
    },
    addNumber: function () {
      if (this.my.numbers.length >= 5) {
        alert('最多5张牌,开局吧')
        this.sendMessage(webSocket.SHOW_CARD, JSON.stringify(this.my))
      } else {
        let newCard = Math.floor(Math.random() * 10) + 1
        this.my.numbers.push(newCard)
        this.sendMessage(webSocket.GET_CARD, JSON.stringify(this.my))
      }
    },
    compareNumber: function () {
      if (this.my.numbers.length < 2) {
        alert('牌太少了,请继续要牌')
      } else {
        this.my.status = 2
        this.sendMessage(webSocket.SHOW_CARD, JSON.stringify(this.my))
      }
    },
    resetGame: function () {
      this.my.status = 1
      this.my.numbers = []
      this.gameResultMessage = []
      this.addNumber()
      this.sendMessage(webSocket.RESET_GAME, JSON.stringify(this.my))
    }
  }
}

</script>

<style scoped>
  .my-1 {
    text-align: left;
  }

  .my-4 {
    text-align: left;
  }
</style>
